【DAY19】bootstrap 4，boo一下！通通都跑出來了呢！

2018 iT 邦幫忙鐵人賽

DAY 19

Modern Web

勇者Jason和前端之鑰系列第 19 篇

2018鐵人賽

JasonYang

團隊Lorem100+tab

2018-01-07 13:01:26

6426 瀏覽

分享至

bootstrap 4我聽到的很多種評價，
有人認為bootstrap用了一堆!important，
一個壓一個，壓到最後網頁很難維護。

關於這點，A同學有不同看法：

懂CSS就不會很困難。

不愧是A同學，從以前到現在總是罩的不要不要的。
我自己感覺bootstrap拿來排版很不錯用，都不用自己寫CSS了。
但是設計師不會用bootstrap的樣式來設計啊！

這時候有2種解法
1.請設計師完全用BS的樣式來設計。
2.還是要配上手刻。

第一種我完全不想考慮，不用設計師，我自己就覺得醜了。
第二種就是利用BS來排版，剩下的自己刻。

其實我在使用BS4的時候，發現：BS4根本就是只要一直下class name就好啦！css都幫你寫好了。

其實我有在想，應該還有第三種方法，就是修改BS4寫的CSS，
客製化BS4，這樣就可以繼續爽爽下class name了。
但是很多東西不太懂，還是不要亂改BS4。
免得怎麼死的都不知道。

那麼今天就先來教大家如何導入BS吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap 4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
   
 </body>
</html>

這是一種導入的方式，直接從網站上抓取。

另外一種是到官網download BS4，
bootstrap 4官網
然後再導入檔案，這種方法應該可以實現客製化BS4。
因為我平常是用第一種方式，這次的鐵人文就拿來學習第二種吧！

首先開啟一個專案資料夾test，同時將下載下來的BS4解壓縮，
然後取scss資料夾放入我們test專案的scss資料夾。
裡面配置如下，

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>button</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
</head>
<body>
    
</body>
</html>

和昨天一樣開啟prepros再開始工作。
記得去bootstrap.scss按儲存，讓他編譯出一個bootstrap.css。
打開_button.scss會發現有很多class name。
好，我們現在先來玩玩他的按鈕。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>button</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
</head>
<body>
    <div class="btn">Button</div>
    <div class="btn btn-primary">Button</div>
    <div class="btn btn-lg btn-info">Button</div>
    <div class="btn btn-sm btn-danger">Button</div>
    <a href="#" class="btn btn-link">link-Button</a>
</body>
</html>

輸入這些，呈現如下圖。